<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getUsers } from '../../util/SessionUtil'

const router = useRouter()
const rt = router.currentRoute.value.fullPath

const navList = ref([false, false, false])
switch (rt) {
  case '/web/personal/base':
    navList.value[0] = true
    break
  case '/web/personal/salvation':
    navList.value[1] = true
    break
  case '/web/personal/salvation-type':
    navList.value[2] = true
    break
  case '/web/personal/donation':
    navList.value[3] = true
    break
  case '/web/personal/comment':
    navList.value[4] = true
    break
  case '/web/personal/collection':
    navList.value[5] = true
    break
}

const toNav = (index: number) => {
  for (let t in navList.value) {
    navList.value[t] = false
  }
  navList.value[index] = true
}

const users = getUsers()
const usersTypeId = ref(0)

onMounted(() => {
  if (users) {
        usersTypeId.value = users.usersTypeId
  }
})


</script>

<template>
  <!--------------------------------------
MAIN
--------------------------------------->
  <div class="container pt-5 pb-5">
    <section class="pt-5 pb-5">
      <div class="row">
        <div class="col-md-3 col-lg-2" data-aos="fade-up">
          <ul class="nav flex-column nav-pills">
            <li class="nav-item">
              <RouterLink to="/web/personal/base" class="nav-link" :class="navList[0] ? 'active' : ''"
                @click="toNav(0)">
                个人中心
              </RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink to="/web/personal/salvation" class="nav-link" :class="navList[1] ? 'active' : ''"
                @click="toNav(1)">我的救助</RouterLink>
            </li>
            <li class="nav-item" v-if="usersTypeId == 3">
              <RouterLink to="/web/personal/salvation-type" class="nav-link" :class="navList[2] ? 'active' : ''"
                @click="toNav(2)">救助类型</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink to="/web/personal/donation" class="nav-link" :class="navList[3] ? 'active' : ''"
                @click="toNav(3)">我的捐赠</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink to="/web/personal/comment" class="nav-link" :class="navList[4] ? 'active' : ''"
                @click="toNav(4)">我的评论</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink to="/web/personal/collection" class="nav-link" :class="navList[5] ? 'active' : ''"
                @click="toNav(5)">我的收藏</RouterLink>
            </li>
          </ul>
        </div>
        <RouterView />
      </div>
    </section>
  </div>
  <!-- End Main -->
  
</template>
